In the previous step you created a new Universal Windows project and added a Rectangle control with a gradient to the application. In this step you'll continue by adding a C1RangeSlider control that will control the gradient fill in the Rectangle.

Complete the following steps:

1. In the XAML window of the project, place the cursor between the </Rectangle> and </Grid> tags and click once.
2. Navigate to the Toolbox and double-click the C1RangeSlider icon to add the control to the application on top of the Rectangle.
3. Give your control a name by adding x:Name="c1rs1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" />

By giving it a unique identifier, you'll be able to access the control in code.

4. Add a margin by adding Margin="50" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50">

This will set each edge the same distance away from the grid's border.

5. Set the Orientation property to Vertical by adding Orientation="Vertical" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical">

By default Orientation is Horizontal and the control appears across the page.

6. Set the UpperValue property to 1 by adding UpperValue="1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1">

The upper thumb will now begin at 1.

7. Set the Maximum property to 1  by adding Maximum="1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1">

Users will now not be able to select a value greater than 1.

8. Set the ValueChange property to 0.1  by adding ValueChange="0.1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">

When you click on the slider track at run time, the slider thumb will now move by 0.1 units.

9. Set  the Opacity property to "0.8"  by adding Opacity="0.8" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">

By default this property is set to 1 and the control appears completely opaque. Changing this to a lower number will make the control appear slightly transparent.

10. Indicate event handlers by adding LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<Xaml:C1RangeSlider x:Name="c1rs1" HorizontalAlignment="Left" Margin="671,10,0,90" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" />

You'll add code for these event handlers in a later step.

11. Run your application now and observe that it looks similar to the following:

 You've successfully set up your application's user interface, but right now the slider will do nothing if you move it. In the next step you'll add code to your application to add functionality.